<%@ page import="databean.Email"%>
<%@ page import="java.util.ArrayList" %>

<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/textAnnotater-0.91.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/disableTextselect.js"></script>
<%  
	
	Email email = (Email) request.getAttribute("email");

%>
<script>

$(document).ready(function() {
	annotaterInit("#content_annotate");
} );

var annotations;

function annotaterInit(cssSelector) {
var options = {};
options.form = '<ul><li><input type="checkbox" name="errorType" value="1" /> Interesting</li><li><input type="checkbox" name="errorType" value="2" /> Not important</li><li><textarea name="comment"></textarea></li></ul>';
options.annotations = <%= email.getNotes() %>;
options.onInit=function(global_annotations){
	annotations = global_annotations;	
};

options.onAddAnnotation=function(addedAnnotation, global_annotations){
	/* add a Word-style comment */
	addBasicWordStyleComment(addedAnnotation);
};

options.onRemoveAnnotation=function(removedAnnotation, global_annotations){
	/* remove the Word-style comment */
	removeBasicWordStyleComment(removedAnnotation);
};

options.onSaveAnnotation=function(savedAnnotation, serializedForm){
	/* update the Word-style comment */
	updateBasicWordStyleComment(savedAnnotation);
};

$(cssSelector).textAnnotate(options);
$(cssSelector).disableTextSelect();

$('#annotationDefinitionsLoaded').val(JSON.stringify(options.annotations));
}

function save(){				
$('#annotationDefinitionsSaved').val(JSON.stringify(annotations));
	var msgId = <%= request.getParameter("messageId") %>;
	var savedNotes = JSON.stringify(annotations);
	
	$.ajax({
		type: 		"post",
		url: 		"conversation-add-notes.do",
		data: 		"noteString=" + savedNotes +"&messageId=" + msgId,
		success:	$("#message").removeClass().addClass("messagebox").html("Notes has been saved!").fadeIn(2000).fadeOut(4000)
	
	});
	
	return false;
}			

/**
* Adds a Word-style comment on the right of the screenx
**/			 			
function addBasicWordStyleComment(annotation){
var comment = _getAnnotationComment(annotation);
	
/* get comment */
if (comment){
	/* put comment in container */
	var firstElement = $('#'+annotation[0].elementId);
	var firstElementTop  = firstElement.offset().top;
	var firstElementHeight = firstElement.height(); 
	var firstElementLeft = firstElement.offset().left;

	var commentContainer = $('<div style="position: absolute; background-color: white; border: 1px solid blue; font-size: 10pt; width: 200px"></div>');
	commentContainer.html(comment);
	$('body').append(commentContainer);
	$(commentContainer).css({"top":firstElementTop+firstElementHeight, "right": 50, "padding-left": 3});						
	var commentContainerLeft = commentContainer.offset().left;						
	
	var commentLine = $('<div style="position: absolute; border-top: 1px dashed blue; height: 1px;"></div>');
	$('body').append(commentLine);						
	$(commentLine).css({"top":firstElementTop+firstElementHeight, "left": firstElementLeft, "width":(commentContainerLeft-firstElementLeft)});
	console.log(annotations);
	
	/* store it in first element, so it can be removed */
	firstElement.data('WordStyleComment', {"container": commentContainer, "line": commentLine});
}					
}

/**
* Removes a Word-style comment on the right of the screen
**/
function removeBasicWordStyleComment(annotation){
var firstElement = $('#'+annotation[0].elementId);
var wordStyleComment = firstElement.data('WordStyleComment');
if (wordStyleComment){
	$(wordStyleComment.container).remove();
	$(wordStyleComment.line).remove();						
}
}

/**
* Updates the Word-style comment
**/			 			
function updateBasicWordStyleComment(annotation){
var firstElement = $('#'+annotation[0].elementId);				

var wordStyleComment = firstElement.data('WordStyleComment');
if (wordStyleComment==undefined) {
	addBasicWordStyleComment(annotation)
}else{					
	var comment = _getAnnotationComment(annotation);
	$(wordStyleComment.container).html(comment);
}
}

/**
* Fetches a comment from an annotation
**/			 			
function _getAnnotationComment(annotation){
var comment;
if (annotation[0]){
	var formValues = annotation[0].formValues;
	if (formValues){
		for (var i=0; i<formValues.length; i++){
			if (formValues[i].name=='comment'){
			  comment = formValues[i].value;
			  break;
			}
		}
	}
}	
return comment;	
}

/*button onclick="save()"*/
</script>

<div id="content" class="left_column" style="width:63%; min-height: 440px; margin-left: 12px;">
<div id="content_header">Message Details <button onclick="save()" class="awesome small green">Save Notes for Message</button></div>
	<div id="content_padded">
	<span id="message" style="margin-left: 170px"></span>	
			<div id="content_annotate" class="contentModule-text">
				<p><%=email.getBody()%></p>
			</div>
	
		<div id="annotations">
		</div>
		
		
		
	</div>
</div>

	
<div class="right_column" style="width:34%; text-align:center;">
	<p><span class="buttonLikeBlue">Notes you have made...</span></p>

</div>

<!-- end of right column -->

